iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 20
0
Modern Web

網頁阿尼尛,到底是在幹尛?系列 第 20

第十九章、你好啊鐵人們,接下來就由我鎖鏈 Canvas 對付你!(參)

  • 分享至 

  • xImage
  •  

簡介

當我們在撰寫 Canvas 時,常常會需要定義一些向量類別來計算元素的位置,然而每一個類別都要建立一個 function 函式來存取資料的話,程式就會變得非常龐大且難以管理。因此本章節我們來介紹一下 JavaScript 內的物件導向。

物件導向

實體物件

| --------------- |
角色

姓名:
性別:
職業:
生命值:
| --------------- |

什麼是物件導向呢?舉例來說,我們遇到了我們在遊歷這個世界時,會遇到形形色色的角色,這些角色都有基礎的屬性諸如:姓名、年齡...等。這就是一個物件。

| --------------- |
技能面板

姓名:鎖鏈康妮
性別:女
職業:坐鎮四樓的魔王
生命值:999
魔力值:999
技能數量:999
| --------------- |

| --------------- |
技能面板

姓名:鐵人勇者
性別:???
職業:轉職勇者
生命值:10
魔力值:10
技能數量:20
| --------------- |

而在各種角色中存在著 - 魔王 鎖練的康妮,我們可以透過點開資訊面板看到康妮的基礎資料,這個 鎖鏈康妮 就是我們建立的一個 物件實體 (Object instance)

接著我們可以操作物件,透過呼叫類別,鎖鏈康妮 使出了招數:地獄曼陀羅!─=≡Σ((( つ•̀ω•́)=c<一ω<)),勇者遭受攻擊,喪失 9.9% 生命值。

我們來試著建立一個實體物件看看吧:

function Person(name,skill){
  this.name = name
  this.skill = skill
  this.attack = function() {
    alert(this.name + '使出攻擊:' + this.skill)
  }
}
// 使用 `new` 告知瀏覽器建立新的物件實例
var person01 = new Person('鎖鏈康妮');

person01.attack(person)

像這樣 Person 這個 function 就像是我們的共用屬性,不論是魔王還是勇者都具有名字、技能等資料。而我們讓這個物件去執行一些動作,比如:使用技能攻擊

而物件導向還可以讓兩個物件去彼此呼叫:

function Person(name,skill){
  this.name = name
  this.skill = skill
  this.attack = function(person) {
    console.log(this.name + '使出攻擊:' + this.skill)
    console.log(person.name + '遭受' + this.name + '攻擊')
  }
}
// 使用 `new` 告知瀏覽器建立新的物件實例
var Boss = new Person('康妮','地獄曼陀羅');
var Braver = new Person('勇者','c876斬');

Boss.attack(Braver);

上面的例子就可以看到,我們讓 康妮一出現就給勇者一頓粗飽。

class 的寫法

雖然像這樣的寫法已經非常彈性且方便,但在 JavaScript 內有更優雅的寫法 class,讓我們不需要手動繼承物件繼承。

以剛剛的範例改寫:

class Person {
  constructor(name, skill) {
    this.name = name;
    this.skill = skill;
  }

  attack(person) {
    console.log(this.name + '使出攻擊:' + this.skill)
    console.log(person.name + '遭受' + this.name + '攻擊')
  }
}

const Boss = new Person('康妮', '地獄曼陀羅');
const Braver = new Person('勇者', 'c876斬');

Braver.attack(Boss);

而在這個範例中,我們利用 class 來建立一個原型物件 constructor 告訴程式 「角色」應該要擁有那些基礎屬性。

接著我們就可以直接建立一個 method 讓角色動作,因此我們可以看到勇者使出了招數:c876斬!(ಠ o ಠ)¤=[]:::::>,康妮遭受了攻擊,喪失 9.9% 生命值。

像這樣的寫法我們就可以看著程式碼也很清楚知道,角色內有什麼屬性,攻擊做了什麼動作。

Canvas 內的物件導向

在上面的介紹後,大家應該就可以很清楚知道我們在寫 Canvas 程式碼時,只需要將基本的元件屬性、動畫時間等先用 constructor 寫好之後,再透過一些動作去呼叫 constructor 內的屬性就好:

class Vector2D {
  constructor(x,y) {
    this.x = x
    this.y = y
  }
}

var a = new Vec2

然後我們就可以在外部寫一些運算邏輯的程式:

class Vector2D{
  constructor(x,y) {
    this.x = x
    this.y = y
  }
	move(x,y){
    return new Vector2D(this.x+x, this.y+y)
  }
}

// 建立起始點
const origin = new Vector2D(3,4)

let target = origin.move(10,10)

console.log('原始X軸座標' + origin.x + '移動到' + target.x)


今天介紹的是 JavaScript ES6 的新語法來整理程式碼,說實話要不是因為學到了 Canvas ,筆者大概這輩子也無法理 class 的奧妙吧。

有關於物件導向的原理還有很多很多諸如:原型練、繼承,等觀念,因為講下去的話可能要講個三天三夜,所以在這邊就先不多說啦~若是有興趣的話大家可以再去多多研究!

那麼我們明天見~


參考資料


上一篇
第十八章、你好啊鐵人們,接下來就由我鎖鏈 Canvas 對付你!(貳)
下一篇
第二十章、你好啊鐵人們,接下來就由我鎖鏈 Canvas 對付你!(肆)
系列文
網頁阿尼尛,到底是在幹尛?30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言